import React, { Component } from 'react';

import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { List, Tools, SearchBar } from "weaver-mobile";
import { withRouter } from 'react-router-dom';


const Item = List.Item;
const getLabel = Tools.getLabel;

@inject("wfSearchPageStore")
@inject("wfAgentStore")
@withRouter
@observer
export default class SearchPage extends Component {
    componentWillMount() {
        const { setState, ssName } = this.props.wfSearchPageStore;
        let arr = [];
        if (Tools.ss.getJSONObj(ssName)) {
            arr = Tools.ss.getJSONObj(ssName);
        }
        setState({ list: arr });
    }

    //清空数据
    clearDatas = () => {
        const { setState, ssName } = this.props.wfSearchPageStore;
        Tools.ss.set(ssName, []);
        setState({ list: [] });
    }
    componentWillUnmount() {
        const { clearSotre } = this.props.wfSearchPageStore;
        clearSotre();
    }

    render() {
        const { list, placeholder, searchValue } = this.props.wfSearchPageStore;
        const { setMobxStore } = this.props.wfAgentStore;
        return (
            <div className="wf-agent-searchPage">
                <SearchBar
                    className="search-select"
                    placeholder={placeholder}
                    defaultValue={searchValue}
                    onChange={(e) => {
                        setMobxStore({ searchValue: e })

                    }}
                    onSubmit={(e) => {
                        // const { onSubmit } = this.props.wfSearchPageStore;
                        if (e.name) {
                            setMobxStore({ searchValue: e.name })
                        } else {
                            setMobxStore({ searchValue: e })
                        }
                        this.props.onSubmit(e)
                        this.props.history.go(-1);
                    }}
                />
                {list.length > 0 && <div className="wm-search-page-modal-history"><span>{getLabel(500348,"搜索历史")}</span></div>}
                {list.length > 0 && < List className="my-list">
                    {list.length > 0 && list.map(item => {
                        return (
                            <Item key={item.key} onClick={() => {
                                this.props.history.go(-1);
                                this.props.onSubmit(toJS(item));
                                setMobxStore({ searchValue: item.name })
                            }}>{item.name}</Item>
                        )
                    })}
                </List>
                }
                {list.length <= 0 && <div className="wf-agent-searchPage-nodata">{getLabel(500350, "暂无搜索历史")}</div>}
                {
                    list.length > 0 && <div className="wf-agent-searchPage-hasdata">
                        <span onClick={this.clearDatas}>{getLabel(500349, "清空搜索记录")}</span>
                    </div>
                }
            </div >
        )

    }
}